<style lang="scss" scoped="">
  @import '../style.scss';
</style>
<template>
  <div class='my_card_outer' style="height:36vh">
    <div class='my_card' style="height:35vh;" >
      <div class="my_card_title">
        <Icon type="md-stats"  color='rgb(67,158,279)' class="my_card_icon"/>PaaS租户整体健康度
      </div>
      <div style="height:30vh" ref="myEchart">
        fdsf

      </div>
    </div>

  </div>

</template>

<script>
  import echarts from 'echarts'
  export default {
    name:'general_health',
    mounted() {
      // this.initChart();

    },
    methods:{
      initChart(data){
        var myChart= echarts.init(this.$refs.myEchart);
        var option=getOption();
        option.series[0].data[0].value = Math.round(data.general_health.health);
        option.series[1].data[0].value = Math.round(data.general_health.object_score);
        option.series[2].data[0].value = Math.round(data.general_health.subject_score);
        myChart.setOption(option, true);
      }
    }
  }


  function getOption(){
    let hv=document.body.clientHeight/100;

    let option = {

      tooltip : {
        formatter: "{a} <br/>{c} {b}"
      },
      toolbox: {
        show : false
      },
      series : [
        {
          name:'总体评分',
          type:'gauge',
          min:-20,
          max:120,
          splitNumber:7,
          radius: '90%',
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              color: [[0.09, 'lime'],[0.82, 'rgb(67,158,255)'],[1, '#ff4500']],
              width: 3,
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisLabel: {            // 坐标轴小标记
            textStyle: {       // 属性lineStyle控制线条样式
              fontWeight: 'bolder',
              fontSize: hv*2,
              color: '#fff',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisTick: {            // 坐标轴小标记
            length :15,        // 属性length控制线长
            lineStyle: {       // 属性lineStyle控制线条样式
              color: 'auto',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          splitLine: {           // 分隔线
            length :25,         // 属性length控制线长
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              width:3,
              color: '#fff',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          pointer: {           // 分隔线
            shadowColor : '#fff', //默认透明
            shadowBlur: 5
          },
          title : {
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              fontSize: document.body.clientHeight/100*1.5,
              fontStyle: 'italic',
              color: '#fff',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          detail : {
            backgroundColor: 'rgba(67,158,255,0.7)',
            borderWidth: 0,
            borderRadius:4,
            formatter:'{value}分',
            fontSize:document.body.clientHeight/100*7,
            shadowColor : '#fff', //默认透明
            shadowBlur: 5,
            offsetCenter: [0, '50%'],       // x, y，单位px
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              color: '#fff'
            }
          },
          data:[{value: 40, name: '总体评分'}]
        },
        {
          name:'客观评分',
          type:'gauge',
          center : ['25%', '55%'],    // 默认全局居中
          radius : '70%',
          min:0,
          max:100,
          endAngle:45,
          splitNumber:5,
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
              width: 2,
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisLabel: {            // 坐标轴小标记
            textStyle: {       // 属性lineStyle控制线条样式
              fontWeight: 'bolder',
              fontSize: hv*1.2,
              color: '#fff',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisTick: {            // 坐标轴小标记
            length :12,        // 属性length控制线长
            lineStyle: {       // 属性lineStyle控制线条样式
              color: 'auto',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          splitLine: {           // 分隔线
            length :20,         // 属性length控制线长
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              width:3,
              color: '#fff',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          pointer: {
            width:5,
            shadowColor : '#fff', //默认透明
            shadowBlur: 5
          },
          title : {
            offsetCenter: [0, '-30%'],       // x, y，单位px
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              fontStyle: 'italic',
              fontSize: hv*1.5,
              color: '#fff',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          detail : {
            show:false
          },
          data:[{value: 76, name: '客观评分'}]
        },
        {
          name:'专家评分',
          type:'gauge',
          center : ['75%', '55%'],    // 默认全局居中
          radius : '70%',
          min:0,
          max:100,
          startAngle:135,
          endAngle:-45,
          splitNumber:5,
          axisLine: {            // 坐标轴线
            lineStyle: {       // 属性lineStyle控制线条样式
              color: [[0.29, 'lime'],[0.86, '#1e90ff'],[1, '#ff4500']],
              width: 2,
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisLabel: {            // 坐标轴小标记
            textStyle: {       // 属性lineStyle控制线条样式
              fontWeight: 'bolder',
              fontSize: hv*1.2,
              color: '#fff',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          axisTick: {            // 坐标轴小标记
            length :12,        // 属性length控制线长
            lineStyle: {       // 属性lineStyle控制线条样式
              color: 'auto',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          splitLine: {           // 分隔线
            length :20,         // 属性length控制线长
            lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
              width:3,
              color: '#fff',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          pointer: {
            width:5,
            shadowColor : '#fff', //默认透明
            shadowBlur: 5
          },
          title : {
            offsetCenter: [0, '-30%'],       // x, y，单位px
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
              fontWeight: 'bolder',
              fontStyle: 'italic',
              fontSize: hv*1.5 ,
              color: '#fff',
              shadowColor : '#fff', //默认透明
              shadowBlur: 10
            }
          },
          detail : {
            show:false
          },
          data:[{value: 76, name: '专家评分'}]
        }
      ]
    };
    return option;
  }


</script>

